<template>
  <div class="knowledge-detail-container">
    <div class="title">{{ updateInfo.title }}</div>
    <div class="tips">
      <span>作者：</span>
      <span style="margin-right: 20px">{{ updateInfo.ownName }}</span>
      <span>日期：</span>
      <span>{{ formatDate(updateInfo.updateTime) }}</span>
    </div>
    <div class="detail-img">
      <video
        v-if="updateInfo.type === 'mp4'"
        id="video"
        width="900"
        height="360"
        :src="`${store.state.imgShowRoad}/file/${updateInfo.picPath}`"
        controls
      ></video>
      <img
        v-else
        style="width: 500px; height: 300px"
        :src="getImageSrc(updateInfo.picPath)"
        alt=""
      />
    </div>
    <div class="detail-content">
      <span>{{ updateInfo.content }}</span>
    </div>
    <el-input type="textarea" v-model="content" :rows="5"></el-input>
    <div
      style="
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      "
    >
      <el-button type="success" @click="handleComment">添加评论</el-button>
    </div>
    <div class="comment-container">
      <div class="comment-num">评论共{{ commentArray.length || 0 }}条</div>
      <div
        class="comment-item"
        v-for="(item, index) in commentArray"
        :key="index"
      >
        <div>{{ item.content }}</div>
        <div class="comment-tips">
          <div style="margin-right: 40px">
            评论人：<span class="color6">{{ item.ownName }}</span>
          </div>
          <div>
            评论时间：<span class="color6">{{
              formatTimer(item.createTime)
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
// import { useStore } from 'vuex';
import {
  selectKnowledgeById,
  selectComment,
  addComment,
} from "../api/knowledge";

import { formatTimer } from "../utils/dateUtil";
import { getImageSrc } from "../utils/imgUtil";
import { formatDate } from "../utils/dateUtil";

// const store = useStore();
const updateInfo = ref({});
const content = ref("");
const commentArray = ref([]);

import { useRoute } from "vue-router";
const route = useRoute();

const getData = () => {
  // store.commit("updateActiveIndex", "4");
  selectKnowledgeById({
    knowledgeId: route.query.id,
  })
    .then((res) => {
      updateInfo.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

const getCommentData = () => {
  selectComment({
    knowledgeId: route.query.id,
  })
    .then((res) => {
      console.log(res);

      commentArray.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
import { ElMessage } from "element-plus";
const handleComment = () => {
  if (content.value === "") {
    ElMessage.error("评论内容不能为空！");
    return;
  }
  addComment({
    knowledgeId: route.query.id,
    content: content.value,
  })
    .then((res) => {
      content.value = "";
      ElMessage.success("评论成功！");
      getCommentData();
    })
    .catch((err) => {
      console.log(err);
    });
};

onMounted(() => {
  getData();
  getCommentData();
});
</script>

<style scoped>
.knowledge-detail-container {
  width: 1100px;
  margin: 0 auto;
  background: #fff;
  min-height: 100%;
  padding: 10px 20px;
  margin-top: 10px;
}
.title {
  font-size: 22px;
  text-align: center;
  color: #666;
}
.tips {
  color: #999;
  display: flex;
  justify-content: flex-end;
  height: 30px;
  align-items: center;
}
.detail-img {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.detail-img video {
  border: 1px solid #f2f2f2;
}
.detail-img img {
  border-radius: 6px;
}
.detail-content {
  margin: 30px 0;
  font-size: 14px;
  line-height: 30px;
  color: #666;
}
.comment-container {
  clear: both;
  margin-top: 10px;
}
.comment-container .comment-num {
  font-weight: bold;
}
.comment-container .comment-item {
  border-bottom: 1px solid #f2f2f2;
  padding: 10px 20px;
  margin: 20px 0;
  word-break: break-all;
}
.comment-container .comment-item .comment-tips {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.comment-container .comment-item .color6 {
  color: #666;
}
</style>